<template>
	<div class="card">
		<div class="TypeTitle" v-if="question.quest.asTitle">
			<template v-for="(item,index) in question.quest.question[0].value" :key="index">
				<p v-if="item !==''" class="mainQuestion">
					{{ item }}
				</p>
			</template>
		</div>
		<div class="question" v-else>
			<div class="title">
				<span>{{ questIndex }}.卡片题</span>
			</div>
			<div class="question">
				<template v-for="(item,index) in question.quest.question[0].value" :key="index">
					<p v-if="item !==''" class="mainQuestion">
						{{ item }}
					</p>
				</template>

				<template v-for="(item1,index1) in question.quest.subQuestion[0].question">
					<template v-if="item1.type=='text'">
						<template v-for="(item,index) in item1.value" :key="index">
							<p v-if="item !==''">
								{{ item }}
							</p>
						</template>
						<div class="button">
							<el-button @click="setUserAnswer">我已读完</el-button>
						</div>
					</template>
					<template v-if="item1.type=='audio'">
						<div class="iconBox">
							<img src="@/assets/audio.png" @click="handlePlay(item1.value)">
							<div class="tips" @click.stop>点击后完成此题</div>
						</div>
					</template>
					<template v-if="item1.type=='picture'">
						<div class="iconBox" @click="setUserAnswer">

							<el-image
								style="width: 150px; height: 150px"
								:src="item1.value"
								:preview-src-list="[String(item1.value)]"
								:initial-index="0"
								fit="contain"
							/>
							<div class="tips" @click.stop>点击图片后完成此题</div>
						</div>
					</template>
					<template v-if="item1.type=='video'">
						<div class="iconBox" @click="setUserAnswer">
							<video controls width="250" @ended="setUserAnswer">
								<source :src="item1.value" type="video/webm"/>
							</video>
							<div class="tips">视频结束后完成此题</div>
						</div>
					</template>
				</template>


			</div>

		</div>


	</div>
</template>
<script setup lang="ts">

import {toRefs, defineProps, reactive, PropType, Ref} from 'vue'
import {Service} from "eleicon";
import {useDataStore} from "@/stores/useDataStore";


const props = defineProps({
	//子组件接收父组件传递过来的值
	question: {
		type: Object as PropType<{ quest: { subQuestion: Array<any>, question: Array<any>,asTitle?: boolean } }>,
	},
	questIndex: {
		type: Number
	},
	seq: {
		type: Number
	}
})


const handlePlay = (source: string) => {
	setUserAnswer();
	if (userAnswerState.currentAudio) {
		userAnswerState.currentAudio.pause(); // 暂停当前音频
		userAnswerState.currentAudio = null; // 释放当前音频
	}

	userAnswerState.currentAudio = new Audio(source) as any; // 创建新的 Audio 对象
	userAnswerState.currentAudio?.play(); // 播放音频
}

const {question, questIndex,seq} = toRefs(props) as {
	question: Ref<{ quest: { subQuestion: Array<any>, question: Array<any> , asTitle?: boolean},  }>,
	questIndex: Ref<number>,
	seq: Ref<number>
}

const userAnswerState = useDataStore();

const state = reactive({})


const setUserAnswer = () => {
	const payload = {
		template: question?.value?.quest.subQuestion[0].template,
	};
	userAnswerState.setUserAnswer(payload, seq.value - 1);
	console.log(userAnswerState.userAnswer)
}

</script>
<style scoped lang="scss">
.card {
	img {
		width: 30px;
		height: 30px;
		object-fit: contain;
	}
	.TypeTitle {
		font-weight: 550;
		font-size: 22px;
		margin-left: -20px;
	}

	.question {
		margin-bottom: 20px;

		.mainQuestion {
			margin-bottom: 20px;
		}

		.button {
			display: flex;
			justify-content: center;
		}

		.title {
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 10px;
			color: #6a727f;
		}

		.dot {
			font-weight: 700;
			color: #5189dd;
			margin-right: 5px;
		}

		.question {
			font-size: 18px;
			color: #7c7787;
			text-indent: 2em;

			.iconBox {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 20px;
				text-indent: 0;

				.icon {
					font-size: 30px;
				}

				.tips {
					margin-top: 20px;
					font-size: 12px;
				}

			}

			.answer {
				display: flex;
				margin-top: 20px;
			}
		}

	}

	.option {
		display: flex;
		justify-content: center;
	}
}

</style>